<template>
    <div class="song_list">
        <div class="back" @click="handleClick">
          <i class="iconfont icon-zuojiantou"></i>
      </div>
      <h1>歌单</h1>
      <div class="music_item_detail">
          <div class="detail_img">
              <img :src="song_list.playlist.coverImgUrl" alt="">
          </div>
          <div class="detail_text">
              <div class="detail_title">{{song_list.playlist.name}}</div>
              <div class="userName">
                  <img :src="song_list.playlist.creator.avatarUrl" alt="">
                  <div>{{song_list.playlist.creator.nickname}}</div>
              </div>
              <div class="detail_information">{{song_list.playlist.description}}</div>
          </div>
      </div>
      <div class="play">
          <div class="play_count">
              <i class="iconfont icon-tianjiawenjianjia"></i>
              <div>311</div>
          </div>
          <div class="play_count">
              <i class="iconfont icon-dangqianhuihua"></i>
              <div>10</div>
          </div>
          <div class="play_count">
              <i class="iconfont icon-fenxiang"></i>
              <div>75</div>
          </div>
      </div>
      <div class="music_list" v-for="(item,index) of song_list.playlist.tracks " :key="item.id">
          <div class="list_item">
              <div>{{index+1}}</div>
              <div class="song_pic">
                  <img :src="item.al.picUrl" alt="img">
              </div>
              <div class="song_detail">
                  <div>{{item.name}}</div>
                  <br>
                  <div>{{item.ar[0].name}}</div>
              </div>
              <div class="play_time">{{item.count_time}}</div>
              <div class="icon_pause" @click="handlePlay(item.id)">
                  <img src="/pause.png" alt="img">
              </div>
          </div>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            song_list:""
        }
    },
    methods: {
        handlePlay(val){
            var id = val
            this.$router.push(`/MusicPlay/${id}`)
        },
        handleClick(){
            this.$router.back();
        },
    },
    mounted() {
        // console.log(this.$route.params);
        var {id} = this.$route.params;
        this.$http.get(`http://47.108.197.28:3000/playlist/detail?id=${id}`).then((res) => {
        res.data.playlist.tracks.forEach(item=>{
            console.log(item);
            var {dt}=item;
            var min=Math.floor(dt/1000/60);
            var s=Math.floor(dt/1000%60);
            var time=min+":"+s;
            item.count_time=time
        })
        this.song_list=res.data
      });
    },
}   
</script>

<style>
.icon_pause img{
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-left: 50px;
}
.song_detail{
    width: 80%;
    height: 50px;
    margin-right: 20px;
}
.list_item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 25px;
    padding:10px 35px;
    height: 100px;
}
.song_list{
    position: relative;
}
.song_pic img{
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 20px;
}
.play{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 60%;
    margin: -130px auto;
    transform: translateX(36%);
    height: 100px;
    border-radius: 50px;
    background-color: #fff;
}
.play_count div{
    margin-top: 10px;
}
.play_count .iconfont{
    font-size: 40px !important;
}
.userName div{
    font-size: 30px;
}
.music_item_detail{
    display: flex;
    height: 300px;
    background-color: #3d3131;
    margin: 15px 25px;
    margin-bottom: 80px;
    padding:30px 35px;
}
.detail_img img{
    width: 220px;
    height: 220px;
    margin-right: 50px;
}
.detail_text{
    margin-top: 15px;
    color: #fff; 
    font-size: 35px;
    width: 380px;  
}
.userName{
    display: flex;
    align-items: center;
    margin: 25px 15px;
}
.userName>img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 25px;
}
.detail_title,.detail_information{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html,body{
    background-color: #fff !important;
}
</style>